<script lang="ts" setup>
import { CopyDocument as CopyIcon, InfoFilled as InfoIcon } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { decrypt, encrypt } from '../../utils/encrypt-decrypt'
import { HandleType } from './types'

const props = defineProps<{
  type: HandleType
  secret: string
  content: string
}>()

const processedContent = computed(() => {
  const fn = props.type === HandleType.encrypt ? encrypt : decrypt
  return fn(props.content, props.secret)
})

const { copy } = useClipboard({ legacy: true })
function handleCopy() {
  copy(processedContent.value)
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch(() => {
      ElMessage.error('复制失败')
    })
}
</script>

<template>
  <ElInput
    v-model="processedContent"
    placeholder="加解密后的内容"
    :prefix-icon="InfoIcon"
    :readonly="true"
  >
    <template #suffix>
      <ElButton
        size="small"
        :link="true"
        :icon="CopyIcon"
        @click="handleCopy"
      />
    </template>
  </ElInput>
</template>
